import 'package:auto_route/annotations.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:sonora/bloc/userInfo/sj_user_info_bloc.dart';
import 'package:sonora/bloc/userInfo/sj_user_info_event.dart';
import 'package:sonora/bloc/userInfo/sj_user_info_state.dart';
import 'package:sonora/config/sj_app_initial.dart';
import 'package:sonora/models/sj_broad_caster_data.dart';
import 'package:sonora/models/sj_works_model.dart';
import 'package:sonora/shared/lib/constants/sj_colors.dart';
import 'package:sonora/utils/sj_text_style.dart';
import 'package:sonora/views/appbar/sj_appbar.dart';
import 'package:sonora/views/navigation/routes/sj_app_router.dart';

@RoutePage()
class SjOtherProfilePage extends StatelessWidget {
  final SjBroadCasterData broadCaster;
  const SjOtherProfilePage({super.key, required this.broadCaster});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true, // 使内容延伸到导航
        appBar: SjAppbar(
          backgroundColor: Colors.transparent, // 设置导航栏背景为透明
          elevation: 0, // 去除导航栏阴影
          leading: IconButton(
            icon: Image.asset('assets/images/nav_back.png'), // 左侧按钮
            onPressed: () {
              // 处理返回逻辑
              Navigator.of(context).pop();
            },
          ),
        ),
        body: BlocProvider<SjUserInfoBloc>.value(
          value: getit<SjUserInfoBloc>()
            ..add(SjUserInfoEventLoaded(broadCaster))
            ..add(SjUserInfoEvent.loadWorksList(userId: broadCaster.userId ?? '')),
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/profile_bg_me.png'),
                fit: BoxFit.cover,
              ),
            ),
            child: Container(
              padding: EdgeInsets.all(20),
              child: Column(children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    BlocBuilder<SjUserInfoBloc, SjUserInfoState>(
                        builder: (context, state) {
                      return Container(
                        child: Column(
                          children: [
                          const SizedBox(height: 40,),
                            Container(
                              width: 80, // Diameter (2 * radius) = 2 * 15
                              height: 80, // Diameter (2 * radius) = 2 * 15
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                  image: NetworkImage(state.caster?.avatar ??
                                      ''), // Replace with your avatar image URL
                                  fit: BoxFit.cover,
                                ),
                                border: Border.all(
                                  color: Colors.black, // Border color
                                  width: 2, // Border width
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    color: SjColors
                                        .themeColor, // Shadow color and opacity
                                    offset:
                                        Offset(1, 1), // Shadow offset (x, y)
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Text(state.caster?.nickname ?? '',
                                style: SjTextStyle.customFontBlack20),
                            Container(
                              padding: EdgeInsets.fromLTRB(8, 5, 8, 2),
                              decoration: BoxDecoration(
                                color: SjColors.themeAColor,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(10.0)),
                              ),
                              child: InkWell(
                                  onTap: () {
                                    ClipboardData data = ClipboardData(
                                        text: state.caster?.userId ?? '');
                                    Clipboard.setData(data);
                                    EasyLoading.showSuccess(
                                        'Copy Successfully');
                                  },
                                  child: Row(children: [
                                    Text(
                                      'ID : ${state.caster?.userId ?? ''}',
                                      style: SjTextStyle.customFontTheme12,
                                    ),
                                    SizedBox(
                                      width: 4,
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(bottom: 4),
                                      child: Image.asset(
                                          'assets/images/copy_icon.png'),
                                    )
                                  ])),
                            )
                          ],
                        ),
                      );
                    })
                  ],
                ),
                SizedBox(
                  height: 8,
                ),
                Expanded(
                  child: BlocBuilder<SjUserInfoBloc, SjUserInfoState>(
                  builder: (context, state) {
                    if (state.worksList == null || state.worksList!.isEmpty) {
                          return  Image.asset('assets/images/empty_icon.png');
                        } else {
                          return MasonryGridView.count(
                            padding: EdgeInsets.symmetric(vertical: 20),
                          crossAxisCount: 2,
                          // 设置列数
                          mainAxisSpacing: 8,
                          crossAxisSpacing: 8,
                          itemCount: state.worksList?.length ?? 0,
                          itemBuilder: (context, index) {
                            SjWorksModel? data = state.worksList?.elementAt(index);
                            return GestureDetector(
                              onTap: (){
                                context.router.push(SjArticleDetailRoute(data: data!));
                              },
                              child: index == 1
                                  ? _buildContentCard(data, index, context)
                                  : _buildContentCard1(data, index, context)
                            );
                          },
                        );
                        }
                  },
                ))
              ]),
            ),
          ),
        ));
  }

    Widget _buildContentCard(SjWorksModel? data, int index, BuildContext context) {
    return Container(
      child: Column(
        children: [
          Image.asset('assets/images/my_article_icon.png'),
          (data?.isPlaceholder != null && data?.isPlaceholder == true) ? const SizedBox() : Padding(
              padding: EdgeInsets.all(2),
              child: Stack(
                children: [
                  Container(
                    padding: EdgeInsets.all(3),
                    decoration: BoxDecoration(
                        color: SjColors.blackColor, boxShadow: [BoxShadow(color: SjColors.iconWhiteColor, offset: Offset(2, 2))]),
                    child: Container(
                      width: double.infinity,
                      height: 215,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage(data?.cover ?? ''),
                          fit: BoxFit.cover,
                        ),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(14.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [],
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    child: InkWell(
                      child: (data?.isLiked == null || data?.isLiked! == false)
                          ? Image.asset('assets/images/home_un_like.png')
                          : Image.asset('assets/images/home_like.png'),
                      onTap: () {
                       context.read<SjUserInfoBloc>().add(SjUserInfoEvent.clickLikeButton(data?.isLiked ?? false, data?.worksId ?? ''));
                      },
                    ),
                    top: 8,
                    right: 8,
                    width: 28,
                    height: 28,
                  ),
                  Positioned(
                    left: 0,
                    bottom: 0,
                    child: Stack(
                      children: [
                        Positioned.fill(
                          left: 0,
                          bottom: 0,
                          child: Container(
                            height: 17,
                            decoration: BoxDecoration(
                                image: DecorationImage(
                                    // alignment: Alignment.bottomLeft,
                                    image: AssetImage('assets/images/home_name_bg.png'),
                                    fit: BoxFit.fitWidth)),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 5),
                          child: Container(
                            width: 30, // Diameter (2 * radius) = 2 * 15
                            height: 30, // Diameter (2 * radius) = 2 * 15
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              image: DecorationImage(
                                image: NetworkImage(data?.avatar ?? ''), // Replace with your avatar image URL
                                fit: BoxFit.cover,
                              ),
                              border: Border.all(
                                color: Colors.black, // Border color
                                width: 1, // Border width
                              ),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.white, // Shadow color and opacity
                                  offset: Offset(1, 1), // Shadow offset (x, y)
                                ),
                              ],
                            ),
                          ),
                        ),
                        Row(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            SizedBox(
                              width: 35,
                            ),
                            Text(
                              data?.nickname ?? '',
                              style: SjTextStyle.customFontBlack24,
                            )
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ))
        ],
      ),
    );
  }

  Widget _buildContentCard1(SjWorksModel? data, index, BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(2),
        child: Stack(
          children: [
            Container(
              padding: EdgeInsets.all(3),
              decoration:
                  BoxDecoration(color: SjColors.blackColor, boxShadow: [BoxShadow(color: SjColors.iconWhiteColor, offset: Offset(2, 2))]),
              child: Container(
                width: double.infinity,
                height: 215,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(data?.cover ?? ''),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(14.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [],
                  ),
                ),
              ),
            ),
            Positioned(
              child: InkWell(
                child: (data?.isLiked == null || data?.isLiked! == false)
                    ? Image.asset('assets/images/home_un_like.png')
                    : Image.asset('assets/images/home_like.png'),
                onTap: () {
                  context.read<SjUserInfoBloc>().add(SjUserInfoEvent.clickLikeButton(data?.isLiked ?? false, data?.worksId ?? ''));
                },
              ),
              top: 8,
              right: 8,
              width: 28,
              height: 28,
            ),
            Positioned(
              left: 0,
              bottom: 0,
              child: Stack(
                children: [
                  Positioned.fill(
                    left: 0,
                    bottom: 0,
                    child: Container(
                      height: 17,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              // alignment: Alignment.bottomLeft,
                              image: AssetImage('assets/images/home_name_bg.png'),
                              fit: BoxFit.fitWidth)),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 5),
                    child: Container(
                      width: 30, // Diameter (2 * radius) = 2 * 15
                      height: 30, // Diameter (2 * radius) = 2 * 15
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: NetworkImage(data?.avatar ?? ''), // Replace with your avatar image URL
                          fit: BoxFit.cover,
                        ),
                        border: Border.all(
                          color: Colors.black, // Border color
                          width: 1, // Border width
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.white, // Shadow color and opacity
                            offset: Offset(1, 1), // Shadow offset (x, y)
                          ),
                        ],
                      ),
                    ),
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(
                        width: 35,
                      ),
                      Text(
                        data?.nickname ?? '',
                        style: SjTextStyle.customFontBlack24,
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ));
  }

}
